<template>
  <div>
    <div>雷达图</div>
    <!-- 使用echart图标 必须给挂载echart的DOM设置宽高 -->
    <div id="main" class="a" />
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      // 配置项
      option: {
        // 标题
        title: {
          // 主标题
          text: 'Basic Radar Chart'
        },
        // 图例组件--就是图形
        legend: {
          // 图例组件的数据数组
          data: ['Allocated Budget', 'Actual Spending']
        },
        // 雷达图
        radar: {
          //
          // shape: 'circle',
          // 雷达图的指示器，用来指定雷达图中的多个变量（维度）
          indicator: [
            { name: 'Sales', max: 6500 },
            { name: 'Administration', max: 16000 },
            { name: 'Information Technology', max: 30000 },
            { name: 'Customer Support', max: 38000 },
            { name: 'Development', max: 52000 },
            { name: 'Marketing', max: 25000 }
          ]
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: 'Allocated Budget'
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: 'Actual Spending'
              }
            ]
          }
        ]
      }
    }
  },
  created() {},
  mounted() {
    // 使用echart:echart是先捕获一个DOM元素然后，将图表渲染到这个DOM元素里。
    // 这就要求我们，要先获取DOM，然后渲染DOM
    // 而vue的template是虚假DOM，是不能直接get到的，只有vue将其编译成真的DOM后才能get到。
    // 而vue将虚假DOM编译成真实DOM是在挂载之后完成的。
    // 所以我们要在mounted里获取真实DOM，并渲染

    // 基于准备好的dom，初始化echarts实例（也就是将我们获取的DOM初始化成echarts能用的实例（对象）【可以简单的理解成还是DOM，只不过能渲染echarts图标了】）
    var myChart = echarts.init(document.getElementById('main'))
    // 将echart渲染到DOM里，并配置配置项
    this.option && myChart.setOption(this.option)
  }
}
</script>

<style scoped>
.a {
  width: 600px;
  height: 600px;
}
</style>
